<template>
  <div class="homeHeader">
    <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
               class="left"/>
    <el-dropdown @command='logoutBtn' class="el_dropdown_d">
      <span class="el-dropdown-link">
        <span style="color: white">{{ user.username }}</span><i class="el-icon-arrow-down el-icon--right" style="color: white"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <el-container>
    <el-aside width="200px">
      <el-menu
          class="el-menu-vertical-demo"
          default-active="/home/userManager"
          router
      >
        <el-menu-item index="/home/userManager">
          <i class="el-icon-user"></i>
          <template #title>用户管理</template>
        </el-menu-item>
        <el-menu-item index="/home/tenant">
          <i class="el-icon-document"></i>
          <template #title>租户管理</template>
        </el-menu-item>
        <el-menu-item index="/home/appManager">
          <i class="el-icon-setting"></i>
          <template #title>应用管理</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container style="background: lightgray">
      <el-header style="height: 50px ;padding-top: 20px">
        <el-breadcrumb separator="/" >
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="background: white;margin: 0px 10px 0px 10px;">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {getCurrentInstance, ref} from "vue";

export default {
  data() {
    return {
      isCollapse: false,
      avUrl: '../assets/logo.png'
    }
  },
  setup() {
    const {proxy} = getCurrentInstance()
    let userinfo = JSON.parse(localStorage.getItem("user_info"))
    const user = {
      username: userinfo !== null ? userinfo.username : ref('')
    }
    const logoutBtn = () => {
      localStorage.removeItem("user_info")
      localStorage.removeItem("user_token")
      proxy.$router.push("/login")
    }
    proxy.$router.push("/home/userManager")
    return {proxy, user, logoutBtn}
  }
}
</script>

<style>

.homeHeader {
  min-height: 60px;
  background: #409eff;
  padding: 0px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: calc(100vh);
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el_dropdown_d {
  padding: 8px 20px;
  position: absolute;
  left: 90%;
  top: 2%;
  z-index: 1;
}

.left {
  position: absolute;
  left: 20px;
  top: 10px;
  z-index: 1;
}

</style>
